<template>
  <view class="course_preview">
    <web-view
      :update-title="false"
      referrerpolicy="no-referrer"
      :src="previewUrl"
      height="100%"
      width="100%"
      frameborder="0"
      id="if"
    >
    </web-view>
  </view>
</template>
<script>
export default {
  model: {
    event: "change",
  },
  props: {
    fileUrl: {
      type: String,
      default: "",
    },
    downFileItem: {},
  },
  data() {
    return {
      previewUrl: ``,
      isError: false,
      isMp: false,
      dtask: {},
      fileDownSrc: "",
    };
  },
  mounted() {
    uni.$once("openFile", () => {
      this.openFile();
    });
    uni.$once("downFile", () => {
      this.downFile();
    });
  },
  watch: {
    fileUrl: {
      handler(newValue) {
        if (!newValue) return;
        this.isMp = true;
        let exit = newValue.split(".").pop().split("?")[0];
        if (!exit.length) return (this.isError = true);
        const arr = ["pptx", "ppt", "docx", "doc", "xlsx", "xls", "pdf"];
        if (arr.indexOf(exit) === -1) return (this.isError = true);
        this.isError = false;
        if (exit === "pdf") return this.pasePdfUrl(newValue);
        this.previewUrl = this.paseOfficeUrl(newValue);
      },
      immediate: true,
    },
  },
  methods: {
    closePre() {
      this.closeFileView();
    },
    paseOfficeUrl(url) {
      url = encodeURIComponent(url);
      return `https://view.officeapps.live.com/op/embed.aspx?src=${url}&amp;wdPrint=0&amp;wdEmbedCode=0&amp;wdStartOn=1`;
      // return `https://view.xdocin.com/view?src=${url}`
      // return `http://vw.usdoc.cn/?src=${url}`
      // return `http://ow365.cn/?ssl=1&i=30924&furl=${url}`
    },
    pasePdfUrl(url) {
      let fileUrl = encodeURIComponent(url);
      this.previewUrl = `/hybrid/html/web/viewer.html?file=${fileUrl}`;
      return;
      url = encodeURIComponent(url);
      return `https://previewpdf.mumudev.top/?file=${url}`;
      // return url
      // return `http://vw.usdoc.cn/?src=${url}`
      // return `http://ow365.cn/?ssl=1&i=30924&furl=${url}`
    },
    downFile() {
      uni.downloadFile({
        url: this.fileUrl, //下载地址接口返回
        success: (data) => {
          if (data.statusCode === 200) {
            //文件保存到本地
            uni.saveFile({
              tempFilePath: data.tempFilePath, //临时路径
              success: (result) => {},
            });
          }
        },
        fail: (err) => {
          uni.showToast({
            icon: "none",
            mask: true,
            title: "失败请重新下载",
          });
        },
      });
    },
    openFile() {
      const src = this.fileDownSrc || this.downFileItem.downPreviewSrc;
      uni.getSavedFileInfo({
        filePath: src,
        success: (res) => {
          if (res) {
            uni.openDocument({
              filePath: src,
              fail: () => {
                uni.showToast({
                  icon: "none",
                  mask: true,
                  title: "文件打开失败！",
                  duration: 3000,
                });
              },
            });
          } else {
          }
        },
        fail: (res) => {},
      });
    },
  },
  computed: {
    previewType() {
      return "";
      let exit = this.fileUrl.split(".").pop().split("?")[0];
      if (!exit.length) return console.log("传入文件格式不正确");
      // exit = exit.pop()
      switch (exit) {
        case "pptx":
        case "ppt":
          return "ppt";
        case "docx":
        case "doc":
          return "word";
        case "xlsx":
        case "xls":
          return "excel";
        case "pdf":
          return "";
        default:
          console.log("传入文件格式不正确");
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.course_preview {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: #fff;
}

.preview {
  background-color: #fff;
  height: 100%;
  width: 100%;
  position: relative;
  padding: 10rpx;
}

.file_btn {
  position: fixed;
  z-index: 108;
  left: 0;
  bottom: 90rpx;
  // padding: 20rpx;
  align-items: center;
  justify-content: space-around;
  display: flex;
  width: 100%;

  > view {
    width: 200rpx;
    // border: 1px solid #333;
    border-radius: 35rpx;
    height: 70rpx;
    line-height: 70rpx;
  }

  .close {
    text-align: center;
    background: #cccbcb;
  }

  .file_down {
    text-align: center;
    color: #fff;
    background: #0a82c7;
  }
}
</style>